<template>
  <div>
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
    />
    <van-tabs @click="tabID">
      <van-tab title="推荐">
        <recommend @sort="sort"></recommend>
        <Cell
          v-for="(item, index) in recommendCell"
          :key="index"
          :title="item.blog.title"
          :userImg="item.user.avatar"
          :userName="item.user.username"
          :content="item.blog.shallowContent"
          :reading="item.blogAction.page_views"
          :collection="item.blogAction.collect"
          :like="item.blogAction.like"
          :id="item.blog.id"
        ></Cell>
      </van-tab>
      <van-tab title="最新">
        <Cell
          v-for="(item, index) in latestList"
          :key="index"
          :title="item.blog.title"
          :userImg="item.user.avatar"
          :userName="item.user.username"
          :content="item.blog.shallowContent"
          :reading="item.blogAction.page_views"
          :collection="item.blogAction.collect"
          :like="item.blogAction.like"
          :id="item.blog.id"
        ></Cell
      ></van-tab>
      <van-tab v-for="i in tabs" :title="i.tagName" :key="i._id">
        <div v-if="getListCategories.length != 0">
          <Cell
            v-for="(item, index) in getListCategories"
            :key="index"
            :title="item.blog.title"
            :userImg="item.user.avatar"
            :userName="item.user.username"
            :content="item.blog.shallowContent"
            :reading="item.blogAction.page_views"
            :collection="item.blogAction.collect"
            :like="item.blogAction.like"
            :id="item.blog.id"
          ></Cell>
        </div>
        <div class="nocont" v-else>没有内容</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  getLabelAPI,
  getRecommendedArticleAPI,
  getLatestArticlesAPI,
  getLabelClassificationAPI,
} from "@/api";
import Cell from "@/components/Cell"; //单元格
import recommend from "@/components/recommend.vue"; //推荐牌序
export default {
  components: {
    Cell,
    recommend,
  },
  data() {
    return {
      tabs: [], //标签数组
      tagId: "62610e4d8d6e021adc72f6cb", //标签id,默认java
      recommendCell: [], //推荐列表
      value: "", //输入框双向绑定
      active: 0, //标签页-索引值-默认打开第几个
      recommendedSort: "1", //排序 1 全部 2 周排序 3 月排序
      page: 1, //初始页面
      latestList: [], //最新列表
      getListCategories: [], //分类标签获取的列表
    };
  },
  watch: {
    // 监听推荐页关于时间的筛选
    async recommendedSort() {
      let getRecommendedArticle = await getRecommendedArticleAPI({
        timeLimit: this.recommendedSort,
        size: 20,
        current: 1,
      });
      console.log(this.recommendedSort);
      this.recommendCell = getRecommendedArticle.data.data.data;
    },
    // 监听分页id变化
    async tagId() {
      let getLabelClassification = await getLabelClassificationAPI({
        categoryId: this.tagId,
        size: 20,
        current: 1,
      });
      this.getListCategories = getLabelClassification.data.data.data;
      console.log(this.getListCategories);
    },
  },
  // 生命周期初始化-钩子函数-初始化后
  async created() {
    // 获取文章标签
    let tab = await getLabelAPI();
    this.tabs = tab.data.data;
    // 获取推荐文章的列表
    let getRecommendedArticle = await getRecommendedArticleAPI({
      timeLimit: this.recommendedSort,
      size: 20,
      current: 1,
    });
    this.recommendCell = getRecommendedArticle.data.data.data;
    // 获取最新文章的列表
    let getLatestArticles = await getLatestArticlesAPI({
      size: 20,
      current: 1,
    });
    this.latestList = getLatestArticles.data.data.data;
    // // 按标签获取文章
    // let getLabelClassification = await getLabelClassificationAPI({
    //   categoryId: this.tagId,
    //   size: 20,
    //   current: 1,
    // });
    // this.getListCategories = getLabelClassification.data.data.data;
    // console.log(this.tabs);
  },
  methods: {
    sort(e) {
      this.recommendedSort = e;
    },
    tabID(id, title) {
      this.tabs.forEach((e) => {
        if (e.tagName === title) {
          this.tagId = e._id;
          // console.log(this.tagId);
        }
      });
    },
  },
};
</script>

<style scoped>
.nocont {
  width: 10rem;
  height: 10rem;
  margin-top: 15rem;
  margin-left: 6.5rem;
  border-radius: 20rem;
  background-color: darkgrey;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
